<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万元</h2>
        <button @click="changeCarPrice">修改汽车的价格</button>
    <br>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id"> {{ g.name}}</li>
    </ul>
        <button @click="changeFirstGame">修改第一个游戏的名字</button>


  </div>

</template>

<script setup lang="ts" name="Person">
import {ref} from "vue";
//数据
let car = ref({ brand: '大众', price: 100})
let games = ref([{
  id:'01',
  name: 'LOL'
},
  {
    id:'02',
    name: 'DOTA'
  },
  {
    id:'03',
    name: '王者荣耀'
  }])

console.log(car) // ref底层 的value 也是通过 reactive 实现的
function changeCarPrice() {
  car.value.price += 10
  console.log(car.value.price)
}

function changeFirstGame() {
  games.value[0].name = '和平精英'
}

</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>